<template>
	<view class="submit">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'去付款'"></Hearder>
		<!-- #endif -->
		<view class="content" v-if="JSON.stringify(data) !='{}'">
			<view style="padding-bottom: 200rpx;">
				<view class="shop-con bgbottom">
					<view class="bigtitle">我的商品</view>
					<view class="shopping-list clearfix">
						<image :src="data.goodsInfo.images_url"></image>
						<view class="shopping-right">
							<view>{{data.goodsInfo.goods_name}}</view>
							<view>￥{{data.goodsInfo.goods_price}}</view>
						</view>
					</view>
				</view>
				<view class="maijiainfo bgbottom">
					<view class="listinfo">
						<view>商品金额</view>
						<view>￥{{data.goodsInfo.pay_price}}</view>
					</view>
					<view class="listinfo">
						<view>卖家信息</view>
						<view>{{data.memberInfo.nickname}}({{data.memberInfo.mobile}})</view>
					</view>
				</view>
				<view class="service bgbottom">
					<view class="bigtitle">支付方式</view>
					<view class="method_con">
						<view :class="type==1?'chooseactive':''" @click="typeTab(1)">微信</view>
						<view :class="type==3?'chooseactive':''" @click="typeTab(3)">支付宝</view>
						<view :class="type==8?'chooseactive':''" @click="typeTab(8)">银行卡</view>
					</view>
					<view class="yhkinfo">
						<view v-if="type==3">
							<view class="every">
								<view class="lable">姓名</view>
								<view class="result" @click="copyurl(data.payInfo.zfb_name)">{{data.payInfo.zfb_name}}<image src="/static/images/copy.png"></image></view>
							</view>
							<view class="every">
								<view class="lable">支付宝账号</view>
								<view class="result" @click="copyurl(data.payInfo.zfb_account)">{{data.payInfo.zfb_account}}<image src="/static/images/copy.png"></image></view>
							</view>
							<view class="every">
								<view class="lable">联系方式</view>
								<view class="result" @click="copyurl(data.payInfo.zfb_phone)">{{data.payInfo.zfb_phone}}<image src="/static/images/copy.png"></image></view>
							</view>
							<view class="every" @click="toPage('lookpay?imgurl='+data.payInfo.zfb_image)">
								<view class="lable">收款码</view>
								<view class="result">
									<text>点击查看收款码</text>
									<u-icon name="arrow-right" color="#A7A7A7" size="18"></u-icon>
								</view>
							</view>
						</view>
						<view v-if="type==1">
							<view class="every">
								<view class="lable">姓名</view>
								<view class="result" @click="copyurl(data.payInfo.wx_name)">{{data.payInfo.wx_name}}<image src="/static/images/copy.png"></image></view>
							</view>
							<view class="every">
								<view class="lable">微信账号</view>
								<view class="result" @click="copyurl(data.payInfo.wx_account)">{{data.payInfo.wx_account}}<image src="/static/images/copy.png"></image></view>
							</view>
							<view class="every">
								<view class="lable">联系方式</view>
								<view class="result" @click="copyurl(data.payInfo.wx_phone)">{{data.payInfo.wx_phone}}<image src="/static/images/copy.png"></image></view>
							</view>
							<view class="every" @click="toPage('lookpay?imgurl='+data.payInfo.wx_image)">
								<view class="lable">收款码</view>
								<view class="result">
									<text>点击查看收款码</text>
									<u-icon name="arrow-right" color="#A7A7A7" size="18"></u-icon>
								</view>
							</view>
						</view>
						<view v-if="type==8">
							<view class="every">
								<view class="lable">姓名</view>
								<view class="result" @click="copyurl(data.payInfo.bank_name)">{{data.payInfo.bank_name}}<image src="/static/images/copy.png"></image></view>
							</view>
							<view class="every">
								<view class="lable">开户银行</view>
								<view class="result" @click="copyurl(data.payInfo.bank)">{{data.payInfo.bank}}<image src="/static/images/copy.png"></image></view>
							</view>
							<view class="every">
								<view class="lable">银行卡号</view>
								<view class="result" @click="copyurl(data.payInfo.bank_card)">{{data.payInfo.bank_card}}<image src="/static/images/copy.png"></image></view>
							</view>
							<view class="every">
								<view class="lable">联系电话</view>
								<view class="result" @click="copyurl(data.payInfo.bank_phone)">{{data.payInfo.bank_phone}}<image src="/static/images/copy.png"></image></view>
							</view>
						</view>
					</view>
				</view>
				<view class="uploadimg bgbottom"  @click="uploadload">
					<view>上传支付凭证</view>
					<view>
						<text v-if="pay_image==''">点击上传</text>
						<image :src="pay_image" v-if="pay_image"></image>
						<u-icon name="arrow-right" color="#A7A7A7" size="18"></u-icon>
					</view>
				</view>
			</view>
			<view class="botBox">
				<view>需支付：<text>￥{{data.goodsInfo.pay_price}}</text></view>
				<view @click="paymoney">我已支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	var time;
	export default {
		data(){
			return{
				data:{},
				pay_image:'',
				id:'',
				order_id:0,
				mobanopen:{},
				type:1,
        from_type:0,
			}
		},
		onLoad(options) {
			this.id = options.id || this.$route.query.id
			if(options.order_id){
				this.order_id = options.order_id || this.$route.query.order_id
			}
      if(options.from_type){
        this.from_type = options.from_type || this.$route.query.from_type
      }
      // 接收页面过来的数据
			this.request('/order/getOrder',{order_id:this.order_id,goods_id:this.id}).then(res => {
				if(res.data.code==1){
					this.data = res.data.data
				}
			})
		},
		methods:{
			typeTab(t){
				this.type=t
			},
			copyurl(url){
				uni.setClipboardData({
					data: url,
					success: function () {
						console.log('success');
					}
				});
			},
			uploadload(){
				var that=this
				uni.chooseImage({
				  count: 1,
				  sourceType: ['album'],
				  success:(res) => {
					time = setInterval(()=>{
						if(this.pay_image){
							uni.hideLoading()
							clearInterval(time)
						}else{
							uni.showLoading({
								title: '加载中'
							});
						}
					},500)
					uni.uploadFile({
						// #ifdef H5
						url: '/upload/image',
						// #endif
						// #ifndef H5
						url: that.$Config.url + '/upload/image',
						// #endif
						filePath: res.tempFilePaths[0],
						name: 'iFile',
						header:{
							token: uni.getStorageSync('TOKEN')
						},
						success: res => {
							if(JSON.parse(res.data).code==1){
								this.pay_image=JSON.parse(res.data).data.file_path
							}else{
								this.$tip(JSON.parse(res.data).msg)
							}
							uni.hideLoading()
						}
					})
				  }
				})
			},
			paymoney(){
				this.request('/order/toPay',{
					total_price:this.data.goodsInfo.pay_price,
					payment_voucher:this.pay_image,
					order_id:this.order_id,
					pay_type:this.type,
				}).then(res => {
					if(res.data.code==1){
            if(this.from_type){
              uni.redirectTo({
                url:'/pages/space/spacemanage?space_id='+this.from_type
              })
            }else{
              uni.redirectTo({
                url:'/pages/loot/billorder?showTab=paid'
              })
            }

					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			toPage(route){
				uni.navigateTo({
					url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.submit{
		.content{
			.bigtitle{
				font-weight: 800;
				height: 70rpx;
				line-height: 70rpx;
				border-bottom: $uni-border-bottom;
			}
			.shop-con{
				padding: 0 4%;
			}
			.shopping-list{
				height: 188rpx;
				padding: 30rpx 0 36rpx;
				box-sizing: content-box;
				image{
					float: left;
					width: 188rpx;
					height: 100%;
				}
				.shopping-right{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					float: left;
					width: calc(100% - 208rpx);
					height: 100%;
					margin-left: 20rpx;
					view{
						&:first-of-type{
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp:2;
							/*! autoprefixer: off */
							-webkit-box-orient: vertical;
							/* autoprefixer: on */
							font-size: 28rpx;
						}
						&:last-of-type{
							color: $uni-text-color;
						}
					}
				}
			}
			.maijiainfo{
				.listinfo{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 4% 24rpx;
					view{
						font-size: 28rpx;
					}
				}
			}
			.service{
				padding: 0 4% 10rpx;
				.bigtitle{
					height: 74rpx;
					line-height: 74rpx;
				}
				.method_con{
					display: flex;
					justify-content: space-between;
					padding-bottom: 24rpx;
					margin-top: 30rpx;
					>view{
						position: relative;
						width: 214rpx;
						height: 68rpx;
						border: 1rpx solid #999;
						text-align: center;
						line-height: 68rpx;
					}
					.chooseactive{
						border: 1rpx solid $uni-item-color;
						background: $uni-item-color;
						color: #fff;
					}
				}
				.yhkinfo{
					.every{
						display: flex;
						justify-content: space-between;
						padding: 26rpx 0;
						view{
							font-size: 28rpx;
						}
						.result{
							image{
								width: 32rpx;
								height: 32rpx;
								margin: -6rpx 0 0 30rpx;
							}
							text{
								color: $uni-text-color;
								font-size: 28rpx;
							}
							.u-icon{
								top: 4rpx;
								margin-left: 6rpx;
							}
						}
					}
				}
			}
			.uploadimg{
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 4%;
				height: 100rpx;
				view{
					font-size: 28rpx;
				}
				text{
					color: $uni-text-color;
					font-size: 28rpx;
					margin-right: 40rpx;
				}
				image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 40rpx;
				}
				.u-icon{
					position: absolute;
					right: 4%;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.botBox{
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 98rpx;
				border-top: $uni-border-bottom;
				view{
					&:first-of-type{
						font-size: 28rpx;
						margin-left: 30rpx;
						text{
							color: $uni-text-color;
							font-size: 36rpx;
						}
					}
					&:last-of-type{
						width: 324rpx;
						background: $uni-item-color;
						color: #fff;
						text-align: center;
						line-height: 98rpx;
					}
				}
			}
		}
	}
</style>
